<template>
	<div class="resource-box"></div>
	<el-dialog :close-on-press-escape="false" custom-class="resource-dialog" :append-to-body="true" v-model="resourceDialogVisible" title="资源管理" width="80%" center>
		<!-- <el-tabs :stretch="true" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="本地" name="first"></el-tab-pane>
			<el-tab-pane label="远程" name="second"></el-tab-pane>
		</el-tabs> -->
		<div style="width: 100%">{{ props.remind }}</div>
		<div class="resource-dialog-box">
			<div class="left-box">
				<FileTypeTree ref="fileTypeTreeRef" @node-click="nodeClick" />
			</div>
			<div class="center-box">
				<template v-for="(item, index) in state.centerListImg" :key="index">
					<div @click="imgClick(item)" class="center-list">
						<template v-if="item.suffix == '.png' || item.suffix == '.jpg' || item.suffix == '.jpeg' || item.suffix == '.ico'">
							<img :src="imgList(item)" />
							<p>{{ item.fileName }}</p>
						</template>
						<template v-else-if="item.suffix == '.mp4' || item.suffix == '.mp3'">
							<img src="../../assets/video.png" />
							<p>{{ item.fileName }}</p>
						</template>
						<template v-else-if="item.suffix == '.zip' || item.suffix == '.rar'">
							<img src="../../assets/yasuobao.png" />
							<p>{{ item.fileName }}</p>
						</template>
						<template
							v-else-if="
								item.suffix == '.doc' ||
								item.suffix == '.docx' ||
								item.suffix == '.pdf' ||
								item.suffix == '.txt' ||
								item.suffix == '.xls' ||
								item.suffix == '.xlsx' ||
								item.suffix == '.ppt' ||
								item.suffix == '.pptx'
							"
						>
							<img src="../../assets/fujian.png" />
							<p>{{ item.fileName }}</p>
						</template>
						<template v-else>
							<img src="../../assets/fujian.png" />
							<p>{{ item.fileName }}</p>
						</template>
					</div>
				</template>
			</div>
			<div :style="{ justifyContent: state.rightListImg.length > 0 ? 'flex-start' : 'center' }" class="right-box">
				<template v-if="state.rightListImg.length > 0">
					<template v-for="(item, index) in state.rightListImg" :key="index">
						<div v-if="fileType == 'img'" class="center-list">
							<el-image :infinite="false" :src="imgList(item)" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="state.srcList" :initial-index="index" fit="cover" />
							<p>{{ item.fileName }}</p>
							<el-icon @click="delImg(index)" class="del-icon" color="red" :size="20"><ele-CircleCloseFilled /></el-icon>
						</div>
						<div v-else-if="fileType == 'video'" class="center-list">
							<img src="../../assets/video.png" alt="" />
							<p>{{ item.fileName }}</p>
							<el-icon @click="delImg(index)" class="del-icon" color="red" :size="20"><ele-CircleCloseFilled /></el-icon>
						</div>
						<div v-else-if="fileType == 'annex'" class="center-list">
							<img src="../../assets/fujian.png" alt="" />
							<p>{{ item.fileName }}</p>
							<el-icon @click="delImg(index)" class="del-icon" color="red" :size="20"><ele-CircleCloseFilled /></el-icon>
						</div>
						<div v-else-if="fileType == 'compress'" class="center-list">
							<img src="../../assets/yasuobao.png" alt="" />
							<p>{{ item.fileName }}</p>
							<el-icon @click="delImg(index)" class="del-icon" color="red" :size="20"><ele-CircleCloseFilled /></el-icon>
						</div>
						<div v-else-if="fileType == 'all'" class="center-list">
							<img src="../../assets/fujian.png" alt="" />
							<p>{{ item.fileName }}</p>
							<el-icon @click="delImg(index)" class="del-icon" color="red" :size="20"><ele-CircleCloseFilled /></el-icon>
						</div>
					</template>
				</template>
				<template v-else>
					<div :style="{ paddingTop: state.rightListImg.length > 0 ? '0' : '180px' }" class="nuxuanz-box">
						<div v-if="fileType == 'img'" class="noxuanz">
							<img src="../../assets/addImg.png" />
							<p>选中图片显示区域,点击图片可进行放大预览</p>
						</div>
						<div v-else-if="fileType == 'video'" class="noxuanz">
							<img src="../../assets/addVideo.png" />
							<p>选中视频显示区域</p>
						</div>
						<div v-else-if="fileType == 'annex' || fileType == 'all'" class="noxuanz">
							<img src="../../assets/fujian.png" />
							<p>选中附件显示区域</p>
						</div>
						<div v-else-if="fileType == 'compress'" class="noxuanz">
							<img src="../../assets/yasuobao.png" />
							<p>选中压缩包显示区域</p>
						</div>
					</div>
				</template>
			</div>
		</div>
		<div class="resource-dialog-box">
			<div class="left-box" style="min-height: auto"></div>
			<div class="center-box" style="min-height: 40px">
				<el-pagination
					v-model:currentPage="state.tableParams.page"
					v-model:page-size="state.tableParams.pageSize"
					:total="state.tableParams.total"
					:page-sizes="[10, 20, 50, 100]"
					small
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					layout="total, sizes, prev, pager, next, jumper"
				/>
			</div>
			<div style="min-height: auto" :style="{ justifyContent: state.rightListImg.length > 0 ? 'flex-start' : 'center' }" class="right-box"></div>
		</div>

		<template #footer>
			<div class="dialog-footer">
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary" @click="callBack"> 确定 </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="resource">
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { getAPI } from '/@/utils/axios-utils';
import { SysFileApi } from '/@/api-services/api';
import FileTypeTree from '/@/views/system/file/component/fileTypeTree.vue';
import type { TabsPaneContext } from 'element-plus';
//父级传递来的参数
let props = defineProps({
	limitNum: {
		type: Number,
		default: 13,
	},
	fileType: {
		type: String,
		default: 'img',
	},
	remind: {
		type: String,
	},
});
const resourceDialogVisible = ref(false);
const state = reactive({
	sysFileTypeId: '',
	serachVal: '' as any,
	tableParams: {
		page: 1,
		pageSize: 10,
		total: 0 as any,
	},
	queryParams: {
		sysFileTypeId: undefined,
	},
	srcList: [] as any,
	centerListImg: [] as any,
	rightListImg: [] as any,
});
const imgList = (item: any) => {
	return window.__env__.VITE_API_URL + item.shortUrl;
};
//父级传递来的函数，用于回调
const emit = defineEmits(['resourceVal']);
// 打开弹窗
const openDialog = () => {
	handleQuery();
	state.rightListImg = [];
	resourceDialogVisible.value = true;
};
onMounted(async () => {});
//删除选中
const delImg = (index: any) => {
	state.srcList.splice(index, 1);
	state.rightListImg.splice(index, 1);
};
// 取消
const cancel = () => {
	resourceDialogVisible.value = false;
};
// 确认选择回调
const callBack = () => {
	if (state.rightListImg.length === 0) {
		ElMessage.warning('请选择');
		return;
	}
	let arr = [] as any;
	state.rightListImg.map((x: any) => {
		arr.push(x);
	});
	emit('resourceVal', arr);
	resourceDialogVisible.value = false;
};

// const activeName = ref('first');

// const handleClick = (tab: TabsPaneContext, event: Event) => {
// 	console.log(tab, event);
// };
//选中事件
const imgClick = (row: any) => {
	if (props.fileType == 'img') {
		if (row.suffix != '.png' && row.suffix != '.jpg' && row.suffix != '.jpeg' && row.suffix != '.ico') {
			ElMessage.warning('只能选择图片类型');
			return;
		} else {
			if (props.limitNum === 1) {
				state.srcList = [];
				state.rightListImg = [];
				state.rightListImg.push(row);
			} else {
				let arr = state.rightListImg.filter((x: any) => {
					return row.id == x.id;
				});
				if (arr.length > 0) {
					return;
				}
				if (state.rightListImg.length >= props.limitNum) {
					ElMessage.warning('超出限制数量，请删除后再选择！');
					return;
				}
				state.srcList = [];
				state.rightListImg.push(row);
				state.rightListImg = Array.from(new Set(state.rightListImg));
			}
			state.rightListImg.map((x: any) => {
				state.srcList.push(x.shortUrl);
			});
		}
	}
	if (props.fileType == 'video') {
		if (row.suffix != '.mp4') {
			ElMessage.warning('只能选择视频类型');
			return;
		} else {
			if (props.limitNum === 1) {
				state.srcList = [];
				state.rightListImg = [];
				state.rightListImg.push(row);
			} else {
				let arr = state.rightListImg.filter((x: any) => {
					return row.id == x.id;
				});
				if (arr.length > 0) {
					return;
				}
				if (state.rightListImg.length >= props.limitNum) {
					ElMessage.warning('超出限制数量，请删除后再选择！');
					return;
				}
				state.srcList = [];
				state.rightListImg.push(row);
				state.rightListImg = Array.from(new Set(state.rightListImg));
			}
			state.rightListImg.map((x: any) => {
				state.srcList.push(x.shortUrl);
			});
		}
	}
	if (props.fileType == 'compress') {
		if (row.suffix != '.zip' && row.suffix != '.rar') {
			ElMessage.warning('只能选择压缩包类型');
			return;
		} else {
			if (props.limitNum === 1) {
				state.srcList = [];
				state.rightListImg = [];
				state.rightListImg.push(row);
			} else {
				let arr = state.rightListImg.filter((x: any) => {
					return row.id == x.id;
				});
				if (arr.length > 0) {
					return;
				}
				if (state.rightListImg.length >= props.limitNum) {
					ElMessage.warning('超出限制数量，请删除后再选择！');
					return;
				}
				state.srcList = [];
				state.rightListImg.push(row);
				state.rightListImg = Array.from(new Set(state.rightListImg));
			}
			state.rightListImg.map((x: any) => {
				state.srcList.push(x.shortUrl);
			});
		}
	} else if (props.fileType == 'annex') {
		if (
			row.suffix != '.doc' &&
			row.suffix != '.docx' &&
			row.suffix != '.pdf' &&
			row.suffix != '.txt' &&
			row.suffix != '.xls' &&
			row.suffix != '.xlsx' &&
			row.suffix != '.ppt' &&
			row.suffix != '.pptx'
		) {
			ElMessage.warning('只能选择附件类型');
			return;
		} else {
			if (props.limitNum === 1) {
				state.srcList = [];
				state.rightListImg = [];
				state.rightListImg.push(row);
			} else {
				let arr = state.rightListImg.filter((x: any) => {
					return row.id == x.id;
				});
				if (arr.length > 0) {
					return;
				}
				if (state.rightListImg.length >= props.limitNum) {
					ElMessage.warning('超出限制数量，请删除后再选择！');
					return;
				}
				state.srcList = [];
				state.rightListImg.push(row);
				state.rightListImg = Array.from(new Set(state.rightListImg));
			}
			state.rightListImg.map((x: any) => {
				state.srcList.push(x.shortUrl);
			});
		}
	} else if (props.fileType == 'all') {
		if (props.limitNum === 1) {
			state.srcList = [];
			state.rightListImg = [];
			state.rightListImg.push(row);
		} else {
			let arr = state.rightListImg.filter((x: any) => {
				return row.id == x.id;
			});
			if (arr.length > 0) {
				return;
			}
			if (state.rightListImg.length >= props.limitNum) {
				ElMessage.warning('超出限制数量，请删除后再选择！');
				return;
			}
			state.srcList = [];
			state.rightListImg.push(row);
			state.rightListImg = Array.from(new Set(state.rightListImg));
		}
		state.rightListImg.map((x: any) => {
			state.srcList.push(x.shortUrl);
		});
	}
};
interface Tree {
	label: string;
	children?: Tree[];
}

// 改变页面容量
const handleSizeChange = (val: number) => {
	state.tableParams.pageSize = val;
	handleQuery();
};

// 改变页码序号
const handleCurrentChange = (val: number) => {
	state.tableParams.page = val;
	handleQuery();
};
// const data: Tree[] = [];

const defaultProps = {
	children: 'children',
	label: 'label',
};
// 树组件点击
const nodeClick = async (node: any) => {
	state.queryParams.sysFileTypeId = node.id;
	handleQuery();
};
// 查询操作
const handleQuery = async () => {
	let params = Object.assign(state.queryParams, state.tableParams);
	var res = await getAPI(SysFileApi).apiSysFilePagePost(params);
	state.centerListImg = res.data.result?.items ?? [];
	state.tableParams.total = res.data.result?.total;
};
//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>
<style scoped lang="scss">
img {
	max-width: 100%;
	-webkit-user-drag: none;
}
.resource-dialog-box {
	display: flex;
	align-items: flex-start;
	.left-box {
		flex: 1;
		padding-top: 10px;
		max-height: 600px;
		min-height: 600px;
		overflow-y: auto;
		padding-right: 20px;
	}
	.center-box {
		flex: 2;
		padding: 0 20px;
		display: flex;
		flex-flow: wrap;
		align-content: flex-start;
		max-height: 600px;
		min-height: 600px;
		overflow-y: auto;
		border-right: 1px solid #eee;
		border-left: 1px solid #eee;
		.center-list {
			padding-top: 10px;
			text-align: center;
			cursor: pointer;
			width: 30%;
			margin: 0 6px;
			padding-bottom: 10px;
			img {
				height: 100px;
			}
		}
	}
	.right-box {
		flex: 2;
		overflow-y: auto;
		display: flex;
		flex-flow: wrap;
		align-content: flex-start;
		max-height: 600px;
		min-height: 600px;
		padding-left: 20px;
		.center-list {
			padding-top: 10px;
			text-align: center;
			cursor: pointer;
			width: 30%;
			margin: 0 6px;
			padding-bottom: 10px;
			position: relative;
			:deep(.el-image) {
				img {
					height: 100px;
				}
			}
			:deep(.el-image-viewer__img) {
				height: 60% !important;
			}
			img {
				height: 100px;
			}
			.del-icon {
				position: absolute;
				top: 0;
				right: 2px;
				border-radius: 16px;
				background: #fff;
			}
		}
		.nuxuanz-box {
			display: flex;
			align-items: center;
			.noxuanz {
				text-align: center;
			}
		}
	}
}
.resource-dialog {
	.el-dialog__body {
		padding: 0 !important;
	}
	.dialog-footer {
		text-align: right !important;
	}
}
</style>
